<template>
	<ul class="table">
		<!-- <span>表头文字说明</span> -->
		<li class="top flex">
			<span class="tr0 tr ilbk" v-text="Lang[lang][0]">币种</span>
			<span class="tr1 tr ilbk" v-text="Lang[lang][1]">可用</span>
			<span class="tr2 tr ilbk" v-text="Lang[lang][2]">冻结</span>
			<!-- <span class="tr3 tr ilbk" v-text="Lang[lang][3]">操作</span> -->
		</li>
		<li v-for="(v, i) in list" :key="i" class="li flex animation zccontainer" @click="e_closeArea">
			<div class="zclist">
				<span class="tr0 tr ilbk" v-text="v.fname" />
				<span class="tr1 tr ilbk" v-text="v.fTotal" />
				<span class="tr2 tr ilbk" v-text="v.fFrozen" />
				<span class="tr3 tr ilbk cur cc">
					<span @click="e_chongzhi(v.fVi_fId)">充值&nbsp;&nbsp;|</span>
					<span @click="e_tibi(v.fVi_fId)">&nbsp;&nbsp;提币</span>
				</span>
			</div>
			<!-- 地址弹框 -->
			<div class="aa" v-if="v.fVi_fId ==openID && isCZOpen">
				<div class="tbaddress">
					<span class="addreddTitle">充币地址</span>
					<div class="addressArea">
						<span v-text="TBAddress" />
						<span class="addressCopy cur" @click="e_copy" v-clipboard:copy="TBAddress">复制</span>
					</div>
				</div>
			</div>

			<!-- 输入弹框 -->
			<div class="aa tbaa" v-if="v.fVi_fId ==openID && isTBOpen">
				<div class="formArea">
					<span class="formLabel">提币地址</span>
					<select class="addressSel" name="" id="" v-model="coinAddress">
						<option value=""></option>
						<option :value="v.fid" v-for="(v,i) in AllAddressList" :key="i+'c'" v-text="v.fAdderess" />
					</select>
				</div>
				<div class="formArea">
					<span class="formLabel">数量</span>
					<div class="inputCon">
						<input class="forminput" type="text" v-model="coinAmount">
						<span class="inputText" v-text="v.fname" />
					</div>
				</div>
				<div class="formArea">
					<span class="formLabel">手续费</span>
					<div class="inputCon">
						<input class="forminput" type="text" v-model="coinSXF" readonly>
						<span class="inputText" v-text="v.fname" />
					</div>
				</div>
				<!-- <div class="formArea">
					<span class="formLabel">到账数量</span>
					<div class="inputCon">
						<input class="forminput" type="text" v-model="coinDZAmount">
						<span class="inputText" v-text="v.fname" />
					</div>
				</div> -->
				<div class="formArea">
					<span class="formLabel">交易密码</span>
					<div class="inputCon">
						<input class="forminput" type="password" v-model="tradpwd">
					</div>
				</div>
				<button class="tbbtn" @click="e_coin(v.fVi_fId)">提币</button>
			</div>
		</li>
		<hb-dialog v-if="showMsg" @clk="msgBack = ''">
			<h3 class="msg" v-text="msgBack" />

		</hb-dialog>
	</ul>

</template>

<script>
import {rightTable} from './lang'
import {vpost, vlink} from '@api'
export default {
	name: 'itable',
	props: {
		personelList: {default: []},
	},
	data() {
		return {
			isCZOpen: false,
			isTBOpen: false,
			openID: '',
			Lang: rightTable,
			hackList: [{name: 'usdt', canu: 235.2234, cant: 0}],
			list: [],
			msgBack: '',
			TBAddress: '', //提币地址
			AllAddressList: [],
			coinAddress: '', //申请提币地址ID
			coinAmount: '',
			coinSXF: '',
			coinDZAmount: '',
			tradpwd: '',
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
		showMsg() {
			return this.msgBack !== ''
		},
	},
	created() {},
	methods: {
		// 复制
		e_copy() {
			alert('复制成功')
		},
		// 获取个人资产账户数据
		getAssectList() {
			vpost(vlink.assets.assetsList, {}).then(re => {
				if (re.status == 1) {
					this.list = re.data.fwallet
				}
			})
		},
		// ==============================================================点击充值获取提币地址👇=========================================================//
		// 充值
		e_chongzhi(fId) {
			this.openID = fId
			this.isCZOpen = !this.isCZOpen
			this.isTBOpen = false
			this.getTBAddress(fId)
		},
		// 获取提币地址
		getTBAddress(fId) {
			let getdata = {
				symbol: fId,
				fuid: sessionStorage.getItem('uid'),
			}
			vpost(vlink.assetList.getSingleAddress, getdata).then(re => {
				if (re.status == 1) {
					this.TBAddress = re.data.fvirtualaddress
				} else {
					this.msgBack = re.msg
					this.isCZOpen = false
				}
			})
		},
		// ==============================================================点击充值获取提币地址👆=========================================================//
		// =============================================================点击提币获取所有的提币地址信息👇===================================================//
		//提币
		e_tibi(fid) {
			this.openID = fid
			this.isTBOpen = !this.isTBOpen
			this.isCZOpen = false
			this.getBZAllAddressInfo(fid)
		},
		// 获取提币地址 fvirtualaddress
		getBZAllAddressInfo(fid) {
			let getdata = {
				symbol: fid,
				fuid: sessionStorage.getItem('uid'),
			}
			vpost(vlink.assetList.getAllAddress, getdata).then(re => {
				if (re.status == 1) {
					this.AllAddressList = re.data.fvirtualaddress
					this.coinSXF = re.data.ffees
				} else {
					this.msgBack = re.msg
					this.isTBOpen = false
				}
			})
		},
		// =============================================================点击提币获取所有的提币地址信息👆===================================================//
		// ==============================================================提币操作👇===================================================================//
		// 申请提币
		e_coin(fVi_fId) {
			let coninDtata = {
				withdrawAddr: this.coinAddress,
				withdrawAmount: this.coinAmount,
				tradePwd: this.tradpwd,
				symbol: fVi_fId,
			}
			if (coninDtata.withdrawAddr == '') {
				this.msgBack = '请选择提币地址'
				return
			}
			if (coninDtata.withdrawAmount == '') {
				this.msgBack = '请输入提币数量'
				return
			}
			if (coninDtata.tradePwd == '') {
				this.msgBack = '请输入交易密码'
				return
			}
			vpost(vlink.assetList.docoin, coninDtata).then(re => {
				if (re.status == 1) {
					this.msgBack = re.msg
					this.clearForm()
				} else {
					this.msgBack = re.msg
					this.clearForm()
				}
			})
		},
		// 清理表单
		clearForm() {
			this.coinAmount = ''
			this.coinAddress = ''
			this.tradpwd = ''
		},
		// ==============================================================提币操作👆===================================================================//

		e_closeArea() {
			// this.isOpen = ''
		},
	},
	mounted() {
		// 获取个人资产数据
		this.getAssectList()
	},
}
</script>

<style scoped>
.table {
	margin: 0 20px;
	min-height: 500px;
	background-color: #171926;
}
.top {
	color: rgb(97, 104, 138);
}
.li {
	border-top: 1px solid #1d253a;
}
.li:hover {
	background-color: #1c1f2e;
}
.tr {
	width: 150px;
	line-height: 48px;
	font-size: 14px;
}
.tr0 {
	padding-left: 10px;
	width: 220px;
	text-align: left;
}
.tr3 {
	text-align: right;
	margin-left: auto;
	padding-right: 10px;
}

.zccontainer {
	display: flex;
	flex-direction: column;
	position: relative;
}
.zclist {
	width: 100%;
}
.aa {
	width: 100%;
	background-color: #171926;
	padding-left: 10px;
	border: 1px solid #262a42;
}
.cc {
	margin-left: auto;
	position: absolute;
	right: 0;
}
.tbaddress {
	width: 100%;
}
.addreddTitle {
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 18px;
	color: rgb(97, 104, 138);
}
.addressArea {
	width: 100;
	height: 40px;
}
.addressCopy {
	color: #7a98f7;
	margin-left: 10px;
}

/*输入部分*/
.tbaa {
	padding-left: 10px;
	display: flex;
	flex-direction: column;
}
.formArea {
	width: 100%;
	height: 60px;
	display: flex;
	flex-direction: column;
	margin-top: 10px;
	margin-bottom: 10px;
}
.addressSel {
	height: 50px;
	background-color: #1d253a;
	color: #fff;
	margin-top: 4px;
}
.inputCon {
	width: 100%;
	height: 50px;
	margin-top: 4px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #ccc;
	background-color: #1d253a;
}
.forminput {
	height: 32px;
	width: 90%;
	background-color: #1d253a;
	border: none;
	font-size: 16px;
	color: #fff;
}
.inputText {
	display: inline-block;
	width: 40px;
	margin-right: 30px;
}
.tbbtn {
	width: 90%;
	height: 40px;
	background-color: #7a98f7;
	color: #fff;
	font-size: 16px;
	border-radius: 6px;
	margin: 10px auto;
}
</style>